<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加支出</title>
</head>
<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
        font-size: 12px;
    }
    #main{
        width: 70%;
        margin: 150px auto;
        height: 500px;
        background-color: gainsboro;
        display: flex;
        flex-direction: column;
    }
    #title{
        flex: 0 0 80px;
        line-height: 80px;
        text-align: center;
        font-size: 40px;
    }
    #contant{
        flex: 1;
        display: flex;
        justify-content: space-around;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    #date{
        height: 40px;
        width: 100%;
        background-color: #d5fcff;
    }
    #dateList{
        width: 30%;
    }
    #tbl{
        width: 100%;
        border: 1px solid white;
        border-collapse: collapse;
    }
    #aom{
        height: 40px;
        width: 100%;
        background-color: antiquewhite;
    }
    #aomText{
        width: 30%;
    }
    #type{
        height: 40px;
        width: 100%;
        background-color: burlywood;
    }
    #typeList{
        width: 30%;
    }
    #submit{
        height: 40px;
        width: 100%;
        background-color: gainsboro;
    }
    #sub{
        width: 10%;
    }
    #tip{
        flex:0 0 45px;
        line-height: 45px;
        text-align: center;
        background-color: darkgray;
    }
    form{
        width: 100%;
    }
</style>
<body>
    <div id="main">
        <div id="title">添加支出</div>
        <div id="contant">
            <form action="" method="post">
                <table id="tbl">
                    <td id="dateList">
                        <input type="date" id="date" name="date" onclick="fun(1)" >
                    </td>
                    <td id="typeList">
                        <select id="type" name="type" onblur="fun(2)">
                            <option value="0"> </option>
                            <option value="1">教育</option>
                            <option value="2">娱乐</option>
                            <option value="3">日常</option>
                        </select>
                    </td>
                    <td id="aomText">
                        <input id="aom" name="aom" type="text" size="10" onblur="fun(3)">
                    </td>
                    <td id="sub">
                        <button id="submit" type="submit">添加</button>
                    </td>
                </table>
            </form>
        </div>
        <div id="tip"> </div>
    </div>
</body>
<script type="text/javascript">
    var date = document.getElementById("date");
    var typ = document.getElementById("type");
    var aom = document.getElementById("aom");
    var tip = document.getElementById("tip");
    var fun = function check(num) {
        var str;
        switch (num) {
            case 1:
                tip.innerHTML = "请选择日期";
                if(date.value!=null){
                    tip.innerHTML = " ";
                }
                break;
            case 2:
                if(typ.value==0){
                    tip.innerHTML = "请选择支出类型";
                }else{
                    tip.innerHTML = " ";
                }
                break;
            case 3:
                str = /^[1-9]{1}[0-9]{1,}$/;
                if(!str.test(aom.value)||(aom.value==null)){
                    tip.innerHTML = "请填写正确的支出金额";
                }else{
                    tip.innerHTML = " ";
                }
                break;
            default:
                break;
        }
    }
</script>
</html>